<template>
    <div class="home" v-title data-title="工程项目填报系统">
        <div class="header-title">工程项目填报系统</div>
        <div class="home-content">
            <div class="home-item borderRightLine borderBottomLine" @click="selectOffice()">
                <img src="../assets/img/office.png"/>
                <span>产量填报</span>
            </div>
            <router-link to="/record" class="home-item borderBottomLine borderRightLine">
                <img src="../assets/img/record.png"/>
                <span>填报记录</span>
            </router-link>
            <div class="home-item borderRightLine borderBottomLine" @click="selectBu()">
                <img src="../assets/img/record.png"/>
                <span>申请补报</span>
            </div>
            <router-link to="/repairRecord" class="home-item borderBottomLine">
                <img src="../assets/img/record.png"/>
                <span>补报记录</span>
            </router-link>
            <router-link to="/managerModifyData" class="home-item borderRightLine" v-if="adminType=='super'">
                <img src="../assets/img/record.png"/>
                <span>数据修改</span>
            </router-link>

        </div>
        <van-popup v-model="isShowSelectType" position="bottom" round>
            <van-picker
                    title="选择档案类型"
                    show-toolbar
                    :columns="columns"
                    :default-index="defaultIndex"
                    :visible-item-count="6"
                    @confirm="onConfirm"
                    @cancel="onCancel"
                    @change="onChangeIndex"/>
        </van-popup>
        <van-popup v-model="isShowSelectBuType" position="bottom" round>
            <van-picker
                    title="选择补报档案类型"
                    show-toolbar
                    :columns="columns"
                    :default-index="defaultIndex"
                    :visible-item-count="6"
                    @confirm="onConfirmBu"
                    @cancel="onCancelBu"
                    @change="onChangeIndex"/>
        </van-popup>
    </div>
</template>

<script>
import { captureRejectionSymbol } from 'events';

    export default {
        name: "Home",
        data() {
            return {
                isShowSelectType: false,
                isShowSelectBuType: false,
                columns: ["文书档案", "会计档案", "基建档案", "特种载体档案", "工程档案", "业务档案", "人事档案"],
                adminType: '',
                defaultIndex:0
            }
        },
        methods: {
            onChangeIndex(picker, value, index){
                this.defaultIndex = index            
            },
            selectOffice() {
                this.isShowSelectType = true
            },
            selectBu() {
                this.isShowSelectBuType = true
            },
            onConfirm(value) {
                localStorage.defaultIndex = this.defaultIndex
                this.isShowSelectType = false
                if (value == "文书档案") {
                    this.$router.push({
                        name: "officeArchives",
                        query: {
                            projectType: 'book'
                        }
                    })
                } else if (value == "特种载体档案") {
                    this.$router.push({
                        name: "officeArchives",
                        query: {
                            projectType: 'special'
                        }
                    })
                } else if (value == "会计档案") {
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'account'
                        }
                    })
                } else if (value == "基建档案") {
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'capital'
                        }
                    })
                } else if (value == "工程档案") {
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'project'
                        }
                    })
                } else if (value == "业务档案") {
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'business'
                        }
                    })
                } else if (value == "人事档案") {
                    this.$router.push({
                        name: "personnelArch",
                        query: {
                            projectType: 'hr'
                        }
                    })
                }
            },
            onConfirmBu(value) {
                localStorage.defaultIndex = this.defaultIndex
                this.isShowSelectBuType = false
                if (value == "文书档案") {
                    this.$router.push({
                        name: "officeArchives",
                        query: {
                            projectType: 'book',
                            type: 100
                        }
                    })
                } else if (value == "特种载体档案") {
                    this.$router.push({
                        name: "officeArchives",
                        query: {
                            projectType: 'special',
                            type: 100
                        }
                    })
                } else if (value == "会计档案") {
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'account',
                            type: 100
                        }
                    })
                } else if (value == "基建档案") {
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'capital',
                            type: 100
                        }
                    })
                } else if (value == "工程档案") {
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'project',
                            type: 100
                        }
                    })
                } else if (value == "业务档案") {
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'business',
                            type: 100
                        }
                    })
                } else if (value == "人事档案") {
                    this.$router.push({
                        name: "personnelArch",
                        query: {
                            projectType: 'hr',
                            type: 100
                        }
                    })
                }
            },
            onCancelBu() {
                this.isShowSelectBuType = false
            },
            onCancel() {
                this.isShowSelectType = false
            },
            checkSession() {
                let params = {}
                let callBack = (res) => {
                    if (!res.checkSession) {
                        localStorage.removeItem("sessionId")
                    }
                }
                this.$request('POST', "/api/mobile/checkSession", params, callBack, this)
            }
        },
        activated() {
            this.defaultIndex = localStorage.defaultIndex
            this.isShowSelectType = false
            this.isShowSelectBuType = false
            this.checkSession()
        },
        mounted() {
            this.adminType = localStorage.getItem("adminType")
        }
    };
</script>
<style lang="scss" scoped>
    .home {
        width: 100%;
        min-height: 100vh;
        background: $page-bg;

        .header-title {
            width: 100%;
            height: $header-top;
            background: $main-color;
            color: #ffffff;
            font-size: $header-title;
            line-height: $header-top;
            text-align: center;
        }

        .home-content {
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: wrap;
            border-bottom: 1px solid $line-color;
            background: white;

            .home-item {
                width: calc(calc(100% - 3px) / 4);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                img {
                    margin-top: 20px;
                    width: 28px;
                    height: 28px;
                }

                span {
                    color: $black;
                    font-size: 14px;
                    margin-top: 5px;
                    margin-bottom: 20px;
                }
            }

            .borderRightLine {
                border-right: 1px solid $line-color;
            }

            .borderBottomLine {
                border-bottom: 1px solid $line-color;
            }
        }
    }

</style>